<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min-1.8.js"></script>
	</head>
	<body>
		<h4>first-child----------------------多个标签中的所有对应第一个标签</h4>
		<div class="aaa">
			<p>1111111111111111111111111111111111111111111111111111111</p>
			<p>1111111111111111111111111111111111111111111111111111111</p>
		</div>
		<div class="aaa">
			<p>1111111111111111111111111111111111111111111111111111111</p>
			<p>1111111111111111111111111111111111111111111111111111111</p>
		</div>
		<script type="text/javascript">
			$('.aaa p:first-child').css({'background':'orange'})
		</script>
		<hr />
		<!--***********************************************************************-->
		
		<h4>last-child---------------------多个标签中的所有对应最后一个标签</h4>
		<div class="bbb">
			<p>2222222222222222222222222222222222222222222222222222222</p>
			<p>2222222222222222222222222222222222222222222222222222222</p>
		</div>
		<div class="bbb">
			<p>2222222222222222222222222222222222222222222222222222222</p>
			<p>2222222222222222222222222222222222222222222222222222222</p>
		</div>
		<script type="text/javascript">
			$('.bbb p:last-child').css({'background':'#ccc'})
		</script>
		<hr />
		<!--***********************************************************************-->
		
		<h4>only-child-------------------仅有有一个(寻找的是 p ，而不是 div)</h4>
		<div class="ccc">
			<p>333333333333333333333333333333333333333333333333333333333</p>
		</div>
		<div class="ccc">
			<p>333333333333333333333333333333333333333333333333333333333</p>
			<p>333333333333333333333333333333333333333333333333333333333</p>
		</div>
		<script type="text/javascript">
			$('.ccc p:only-child').css({'background':'yellow'})
		</script>
		<hr />
		<!--***********************************************************************-->
		
		<h4>nth-child()-----------------------第几个，从 1 开始****</h4>
		<div class="ddd">
			<p>4444444444444444444444444444444444444444444444444444444</p>
			<p>4444444444444444444444444444444444444444444444444444444</p>
			<p>4444444444444444444444444444444444444444444444444444444</p>
		</div>
		
		<script type="text/javascript">
			$('.ddd p:nth-child(2)').css({'background':'green'})
		</script>
		<hr />
		<!--***********************************************************************-->
		
		
		
		
		
		
		<h4>:input</h4>
		<h4>:text</h4>
		<h4>:password</h4>
		<h4>:checkbox</h4>
		<h4>:submit</h4>
		<h4>:reset</h4>
		<h4>:button</h4>
		<h4>:file</h4>
		<h4>:hidden</h4>
		
		
		
		
		
		<h4>:checked</h4>
		<h4>:selected</h4>
		<h4></h4>
		<h4></h4>
		<h4></h4>
		<h4></h4>
		<h4></h4>
		<h4></h4>
		<h4></h4>
		<h4></h4>
	</body>
</html>
